<template>
    <div class="edit-profile-page">
        <el-card class="edit-card">
            <h2 class="edit-title">修改个人信息</h2>
            <p class="edit-text">修改名称或密码时，都需要输入当前密码</p>
            <el-form
                :model="form"
                label-width="100px"
                style="max-width: 400px; margin: auto"
            >
                <el-form-item label="账号">
                    <el-input v-model="form.account" disabled />
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.name" placeholder="请输入新名字" />
                </el-form-item>
                <el-form-item label="原密码">
                    <el-input
                        v-model="form.oldPassword"
                        type="password"
                        placeholder="请输入原密码"
                    />
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input
                        v-model="form.newPassword"
                        type="password"
                        placeholder="请输入新密码（不修改请留空）"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        :loading="loading"
                        @click="handleEdit"
                        round
                        >保存修改</el-button
                    >
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import { BASE_URL } from "../config/http.js";
import { ElMessage } from "element-plus";

const userId = sessionStorage.getItem("user_id");
const token = sessionStorage.getItem("token");

const form = reactive({
    account: "",
    name: "",
    oldPassword: "",
    newPassword: "",
});
const loading = ref(false);
const message = ref("");
const error = ref("");

// 获取当前用户信息
onMounted(() => {
    if (userId && token) {
        axios
            .get(`${BASE_URL}/api/user/${userId}`, {
                headers: { Authorization: "Bearer " + token },
            })
            .then((res) => {
                form.account = res.data.account;
                form.name = res.data.name;
            });
    }
});

function handleEdit() {
    loading.value = true;
    message.value = "";
    error.value = "";
    axios
        .put(
            `${BASE_URL}/api/user/edit/${userId}`,
            {
                name: form.name,
                oldPassword: form.oldPassword,
                newPassword: form.newPassword,
            },
            {
                headers: {
                    Authorization: "Bearer " + token,
                    "Content-Type": "application/json",
                },
            }
        )
        .then((res) => {
            message.value = res.data.message;
            ElMessage.success(res.data.message);
            form.oldPassword = "";
            form.newPassword = "";
        })
        .catch((err) => {
            error.value = err.response?.data?.error || "编辑失败";
            ElMessage.error(error.value);
        })
        .finally(() => {
            loading.value = false;
        });
}
</script>

<style lang="scss" scoped>
.edit-profile-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    background: transparent;
}
.edit-card {
    width: 480px;
    border-radius: 32px;
    box-shadow: 0 8px 32px 0 rgba(60, 60, 120, 0.12);
    padding: 32px 36px 36px 36px;
    background: #fff;
    animation: mainPop 0.7s cubic-bezier(0.55, 0, 0.1, 1);
}
.edit-title {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 24px;
    letter-spacing: 2px;
}

.edit-text {
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    color: #d240ff;
    margin-bottom: 24px;
    letter-spacing: 2px;
}
@keyframes mainPop {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
</style>